//首页的less样式文件
@import "common";
// @import 可以把一个样式文件导入到另外一个样式文件里面
//link 是把一个样式文件引入到html页面里面

body {

	min-width: 320px;
	/* 最小的宽度 */
	max-width: 15rem;
	/* 最大宽度 不必要设置 */
	margin: 0 auto;
	/* 字体样式，不是苹果用后面 的字体 */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: (30rem /@baseFont);
	line-height: 1.5;
	background-color: skyblue;
}



img {
	border: none;
	display: block;
}


ul,p {
	margin: 0;
	padding: 0;
	list-style: none;
}


a {
	text-decoration: none;
	color: #000;
	background-color: transparent;
}

li{
	list-style: none;
}
@baseFont: 50;
        #head{
            // height: 80px;
            background-color: rgb(240, 135, 135);
			.search-wrap {
				position: relative;
				 z-index: 3;
				/* flex布局 */
				display: flex;
				// position: fixed;
			
				//文字居中
				// left: 50%;
				// transform: translateX(-50%);
				/* 固定定位必须有宽度*/
				width: 15rem;
				height: (100rem /@baseFont);
				
				background-color: #fff;
				
			
			/* 头像 */
				.search-touxiang {
				/* 相对定位 */
				// position: absolute;
				// top: 0;
				// left: 0;
			
				
				width: (80rem/@baseFont);
				height: (100rem/@baseFont);
				
				/* 头像图 */
				a>span {
					font-size: (70rem/@baseFont);	
					padding-left: (5rem/@baseFont);
					}
			
			
				}
			
			
			/* 搜索框 */
				.search {
				/* 父 */
				position: relative;
				flex: 1;
			
				
				
				.sousuo-box{
					
					height: (100rem/@baseFont);
					
					
				}
				
				span{
					
					position: absolute;
					top: (30rem/@baseFont);
					left: (25rem/@baseFont);
					font-size: (30rem/@baseFont);
				}
				input{
					outline: none;
					
					border: 0;
					height: (66rem/@baseFont);
					
					width: 100%;
					border-radius: (33rem/@baseFont);
					margin: (16rem/@baseFont) (10rem/@baseFont);
					background-color: #dcdcdc;
					font-size: (25rem/@baseFont);
					padding-left: (55rem/@baseFont);
				}
			
			 }
			
			
			/* 最右box */
			 .search-right {
				width: (200rem/@baseFont);
				height: (100rem/@baseFont);
			
			
			 a>span{
				font-size: (70rem/@baseFont);
				padding-left: (20rem/@baseFont);
				// margin-right: (10rem/@baseFont);
				}
				
				}
			
			}
		
		}

/* 文字栏 */


#fixed{
            // width: 100%;
            top: 0;
            // left: 0;
            background-color: rgb(240, 238, 111);
            // height: 80px;
            z-index: 3;
        
	#word {
	// position: relative;
	//  z-index: 3;
	// position: fixed;
	// margin-top: (100rem /@baseFont);
	background-color: #fff;
	
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	/* 固定定位必须有宽度*/
	width: 15rem;
	height: (50rem /@baseFont);

	
	.nav {
	display: flex;
	justify-content: space-evenly;
	list-style: none;
	margin: 0 auto;
	// flex-wrap: nowrap;
		/* 默认激活文字 */
		.active>a {
		color: rgb(237, 112, 152);
		}
		.active>a::before{
			visibility: visible;
			color:rgb(237, 112, 152);
			/* 菜单选项中状态默认显示线条 */
			-webkit-transform: scaleX(1);
			-ms-transform: scaleX(1);
			transform: scaleX(1);
			
		}
		
		.nav-item {
		line-height:(45rem /@baseFont);
		font-size: (30rem /@baseFont);
		
		}
		/* 鼠标滑过时候的界面的颜色 */
		.nav-link:hover {
			color: rgb(237, 112, 152);
		}
		
		.nav-link:hover::before{
			visibility: visible;
			background-color: rgb(237, 112, 152);
			-webkit-transform: scaleX(1);
			-ms-transform: scaleX(1);
			transform: scaleX(1);

		}
		.nav-link{
			padding-top: (45px /@baseFont);
			padding-bottom: (45px /@baseFont);
			padding-left: (45px /@baseFont);
			padding-right: (45px/@baseFont);
			color: #000000;
			position: relative;
			opacity: 1 !important;
		}
		.nav-link::before{
			content: "";
			position: absolute;
			width: 100%;
			height: 3px;
			bottom: 0;
			left: 0;
			background-color: rgb(237, 112, 152);
			/*默认设置隐藏*/
			visibility: hidden;
			/*水平方向上尺寸为0*/
			-webkit-transform: scaleX(0);
			-ms-transform: scaleX(0);
			transform: scale(0);
			/*慢入慢出0.1s的效果*/
			-webkit-transition: all 0.1s ease-in-out 0s;
			-o-transition: all 0.1s ease-in-out 0s;
			transition: all 0.1s ease-in-out 0s;
			z-index: -1;
		}
	}

	}

}

/* 中间部分!!!! */

/* 文字！！！内容！！！*/
.bai{

	// position: relative;
	// z-index: -1;
	width: (750rem/@baseFont);
	height: (150rem/@baseFont);
	background-color: #fff;
}


/* 文字！！！内容！！！*/
.bbai{

	// position: relative;
	// z-index: -1;
	width: (750rem/@baseFont);
	height: (2000rem/@baseFont);
	background-color: #fff;
}


.context-one{
	//让中间内容置于最下面！！！
	// z-index: -1;
	// position: relative;
	width: (750rem/@baseFont);
	
	//flex-wrap实现弹性盒自动换行
	display: flex;
	flex-wrap: wrap;
	height: (160rem/@baseFont);
	background-color: #fff;
	.view{
		position: relative;
		// padding-left: (10rem/@baseFont);
		width: (100rem/@baseFont);
		// overflow: hidden;
		
		display: inline-block;
			
		flex-grow: 1;
		//防止被挤压
		flex-shrink: 0;
	
	}
	
	.xuanfu{

		height:(50rem/@baseFont) ;
		text-align: center;
		//flex-wrap实现弹性盒自动换行
		display: flex;
		flex-wrap: wrap;
		
		width: 100%;
		left: 0;
		li{
			width: 25%;
		
		}

		span{
			font-weight: bolder;
			color:rgb(237, 112, 152);
			font-size: (70rem/@baseFont) ;
		}

	}
	
	
}
.context-ttwo{
	width: 15rem;
	display: flex;
	flex-wrap: wrap;
	height: (100rem/@baseFont);
	

	.all{
		
		width: 15rem;
		height: (260rem/@baseFont);
		background-color: #fff;
		overflow: hidden;
		border-bottom: 1px solid #dcdcdc;

	
	.r{
		margin-top:(10rem/@baseFont);
		float: right;
		width: 50%;
		height: (100rem/@baseFont);
		
		li{
			display: flex;
			width: 100%;
			height: (60rem/@baseFont);
		.bottom{
			position: relative;
			width: 100%;		
			span{
				padding-bottom: ;
				font-size: (40rem/@baseFont);
				float: left;
				
			}
			p{
				
				margin-left: (4rem/@baseFont);
				float: left;
				
			}
			
			.icon-diandiandianshu{

				margin-left: (40rem/@baseFont);
				font-size: (30rem/@baseFont);
			}
			
		}
		
		
		.author{

			width: 100%;

			margin-top: (5rem/@baseFont);
			span{
				font-size: (40rem/@baseFont);
			
				float: left;
				
			}
			p{
				float: left;
				margin-left: (5rem/@baseFont);
			}
		}
		
		.bof{
			width: 40%;
			background-color:rgba(222, 134, 9, 0.2);
			text-align: center;
			margin-top: (25rem/@baseFont);
			margin-left: (5rem/@baseFont);
			p{
				color: #de6c3f;
				font-size: (25rem/@baseFont);
			}
		}
		}
	
	}	
	
	li:nth-child(1){
		color:green;
		
	}
	
	
	.l{
	
		float: left;
		width: 48%;

		img{
			margin-top:(20rem/@baseFont);
			margin-left:(8rem/@baseFont);
			width: 100%;
		}
	}
	}
}



/* footer底部 */
.footer {
	// position: fixed;	
	// /* 固定定位必须有宽度*/
	// width: 15rem;
	// height: (150rem /@baseFont);
	// bottom: 0;
	// background-color: #fff;
	// //文字居中
	// left: 50%;
	// transform: translateX(-50%);
	// overflow: hidden;
	// text-align: center;
	z-index: 3;
	position: relative;
	position: fixed;
	width: 15rem;
	height: (120rem /@baseFont);
	background-color: #fff;
	// bottom: 0;

	bottom: 0;
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	overflow: hidden;
	text-align: center;
	
	.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	/* fill:currentColor是什么意思？ 
			          比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。 
			          对于动画，它定义了动画的最终状态。 在下面的例子中，它定义了图标的颜色。
			           在css中，currentColor是一个变量，这个变量的值是当前元素的color值。 */
	fill: currentColor;
	/*  */

	}
	
	#bnav {
	
		/* fixed相对于浏览器窗口进行定位，正常情况下没有问题，当使用transform:translate(0px,-5px);属性后问题就出现了 */
		/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
		display: flex;
	
	 li:nth-child(1) {
		width: 20%;
	}
	
	 li:nth-child(2) {
		width: 20%;
	}
	
	 li:nth-child(3) {
		width: 20%;
	}
	
	 li:nth-child(4) {
		width: 20%;
	}
	
	 li:nth-child(5) {
		width: 20%;
	}
	
	svg {
		font-size: (70rem /@baseFont);
	
	}
	
	p {
		font-size: (14rem /@baseFont);
		line-height: (50rem /@baseFont);
	
	}
	
	 .footer-nav>.icon:hover {
		color: rgb(237, 112, 152);
	}


	 .active {
		color: rgb(237, 112, 152);
	}
	
	}
	

}


